/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-09 09:36:34
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-09 16:20:24
 */
import axios from 'axios'
import React, { useState, useEffect } from 'react'

/* 
class
constructor(){}
render(){}
componentDidMount=====Mounted=====useEffect



*/

const Func = () => {
  const fn = (e) => {
    console.log(e.clientX, e.clientY)
  }
  useEffect(() => {
    // destroyed钩子函数
    window.addEventListener('mousemove', fn)
    return () => {
      console.log('清理函数')
      window.removeEventListener('mousemove', fn)
    }
  }, []) //  不传参数：updated   传一个空数组：mounted  数组中穿的是其他值：watch + updated
  return <div>御剑乘风来,除魔天地间!===Func</div>
}

const State2 = () => {
  let [count, setCount] = useState(1)
  let [n, setN] = useState(10)
  let [list, setList] = useState([])
  const [isShow, setIsShow] = useState(true)
  // 2. 使用useEffect
  useEffect(() => {
    console.log('useEffect 1 执行了,可以做副作用')
  }, [count])
  useEffect(() => {
    console.log('useEffect 2 执行了,可以做副作用')
  }, [n])
  const handle = () => {
    // setCount(count + 2)
    setN(n + 10)
  }
  // useEffect(() => {
  //   setInterval(() => {
  //     setCount(count + 1)
  //   }, 1000)
  // })
  // setInterval(() => {
  //   setCount(count + 1)
  // }, 1000)
  console.log(123)
  useEffect(() => {
    // 发送请求获取数据
    // const getList1=()=>{}
    async function getList() {
      // axios
      //   .get('https://apipc-xiaotuxian-front.itheima.net/home/category/head')
      //   .then((res) => {
      //     console.log(res, 88)
      //     setList(() => {
      //       return (list = res.data.result)
      //     })
      //   })
      // const res = await axios.get(
      //   'https://apipc-xiaotuxian-front.itheima.net/home/category/head'
      // )
      // setList(() => {
      //   return (list = res.data.result)
      // })

      /* 
      面向对象===万物皆对象：
      冯斗勇====={
        方法：撩妹大发，
        属性：2个大眼睛，小嘴，瓜子脸
        方法：娶回去
      }
      研究对象===三要素  new  XMLHttpRequest()
      属性:readyState
      方法:open
      回调函数:onreadystatechange
      
      */

      fetch('https://apipc-xiaotuxian-front.itheima.net/home/category/head')
        .then(function (response) {
          // 处理 HTTP 响应
          // console.log(response, 88)
          return response.text()
        })
        .then((result) => {
          // 这里才可以获取返回的数据
          // console.log(result, 777)
        })
    }
    getList()
  }, [])

  return (
    <div>
      <hr />
      {isShow && <Func></Func>}
      {/* {
        if(isShow) {
          return <Func></Func>
        }
      } */}
      <hr />
      御剑乘风来,除魔天地间!===State2==={count}=={n}====
      <button onClick={() => setCount(count + 1)}>setCount</button>
      <button onClick={() => handle()}>setN+2</button>
      <button onClick={() => setIsShow(!isShow)}>isShow</button>
      <ul>
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
    </div>
  )
}
export default State2
